<template>
    <el-drawer
    title="人工认证"
    :visible="authenticationShow"
    size="70%"
    @close="dialogClose"
    :before-close="handleClose"
      >
    <el-form :model="ruleForm" :rules="rules" ref="authentication" label-width="auto">
      <el-row :gutter="24">
          <el-col :span="8">
              <el-form-item label="姓名" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="证件" prop="card">
                  <el-select v-model="ruleForm.card" class="select"></el-select>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="证件号" prop="cardId">
                  <el-input v-model="ruleForm.cardId"></el-input>
              </el-form-item>
          </el-col>
      </el-row>

      <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="身份证人像面" prop="photo1" v-model="ruleForm.photo1">
                <el-upload action="#" list-type="picture-card" :auto-upload="false">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>

                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload>
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证国辉面" prop="photo2" v-model="ruleForm.photo2">
                <el-upload action="#" list-type="picture-card" :auto-upload="false">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>

                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload>
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手持身份证人像面" prop="photo3" v-model="ruleForm.photo3">
                <el-upload action="#" list-type="picture-card" :auto-upload="false">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>

                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload>
              </el-form-item>
          </el-col>
      </el-row>
  
      <hr>
      <br>
  
      <el-row :gutter="24">
          <el-col :span="8">
              <el-form-item label="机构名称" prop="companyName">
                  <el-input v-model="ruleForm.companyName"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="证件" prop="cardType">
                  <el-select v-model="ruleForm.cardType" class="select"></el-select>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="统一社会信用代码" prop="code">
                  <el-input v-model="ruleForm.code"></el-input>
              </el-form-item>
          </el-col>
      </el-row>

      <el-row :gutter="24">
          <el-col :span="8">
              <el-form-item label="法人姓名" prop="legalPersonName">
                  <el-input v-model="ruleForm.legalPersonName"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="法人证件" prop="legalPersonCard">
                  <el-select v-model="ruleForm.legalPersonCard" class="select"></el-select>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="法人证件号" prop="legalPersonCardId">
                  <el-input v-model="ruleForm.legalPersonCardId"></el-input>
              </el-form-item>
          </el-col>
      </el-row>

      <el-row :gutter="24">
          <el-col :span="8">
              <el-form-item label="法人电话" prop="legalPersonPhone">
                  <el-input v-model="ruleForm.legalPersonPhone"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="16">
              <el-form-item label="机构证件有效期至" prop="date">
                <el-date-picker
                type="date"
                placeholder="选择日期"
                class="select">
                </el-date-picker>
              </el-form-item>
          </el-col>
      </el-row>

      <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="证件详细资料页" prop="photo4" v-model="ruleForm.photo4">
                <el-upload action="#" list-type="picture-card" :auto-upload="false">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>

                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload>
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证人像面" prop="photo5" v-model="ruleForm.photo5">
                <el-upload action="#" list-type="picture-card" :auto-upload="false">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>

                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload>
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证国辉面" prop="photo6" v-model="ruleForm.photo6">
                <el-upload action="#" list-type="picture-card" :auto-upload="false">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>

                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload>
              </el-form-item>
          </el-col>
      </el-row>
  
    </el-form>
  
      <el-row>
          <br>
          <br>
      </el-row>
  
    <span style="display: flex; margin-right: 1%;">
        <div style="flex: 1"></div>
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" @click="submitData()">确 定</el-button>
    </span>
  
    <el-row>
          <br>
      </el-row>
  
  </el-drawer>
  
  </template>
  
  <script>
  export default {
      data(){
          return{
              imageUrl: '',
  
              ruleForm: {
                  name: '',
                  card: '',
                  cardId: '',
                  photo1: '',
                  photo2: '',
                  photo3: '',
                  companyName: '',
                  cardType: '',
                  code: '',
                  legalPersonName: '',
                  legalPersonCard: '',
                  legalPersonCardId: '',
                  legalPersonPhone: '',
                  date: '',
                  photo4: '',
                  photo5: '',
                  photo6: '',
              },
              rules:{
                  name:[
                      {required: true, message: '请输入'}
                  ],
                  card:[
                      {required: true, message: '请选择'}
                  ],
                  cardId:[
                      {required: true, message: '请输入'}
                  ],
                  photo1:[
                      {required: true, message: '请选择'}
                  ],
                  photo2:[
                      {required: true, message: '请选择'}
                  ],
                  photo3:[
                      {required: true, message: '请选择'}
                  ],
                  companyName:[
                      {required: true, message: '请输入'}
                  ],
                  cardType:[
                      {required: true, message: '请选择'}
                  ],
                  legalPersonName:[
                      {required: true, message: '请输入'}
                  ],
                  legalPersonCard:[
                      {required: true, message: '请选择'}
                  ],
                  legalPersonCardId:[
                      {required: true, message: '请输入'}
                  ],
                  legalPersonPhone:[
                      {required: true, message: '请输入'}
                  ],
                  date:[
                      {required: true, message: '请选择'}
                  ],
                  photo4:[
                      {required: true, message: '请选择'}
                  ],
                  photo5:[
                      {required: true, message: '请选择'}
                  ],
                  photo6:[
                      {required: true, message: '请选择'}
                  ],
              }
          }
      },
      props:{
        authenticationShow:{
              type:Boolean
          },
      },
      methods: {
          dialogClose(){ 
              this.$emit('dialogClose');
          },
          submitData(){
              this.$refs.authentication.validate((valid) => {
                  if (!valid) {
                      return ;
                  }
                  else {
                      this.$emit('dialogClose');
                  }
              });
          },
          handleAvatarSuccess(res, file) {
              this.imageUrl = URL.createObjectURL(file.raw);
          },
          beforeAvatarUpload(file) {
              const isJPG = file.type === 'image/jpeg/jpg/git/bmp/png';
  
              if (!isJPG) {
                  this.$message.error('上传头像图片只能是jpeg/jpg/git/bmp/png格式!');
              }
              return isJPG;
          },
          handleClose(done) {
              done();
          },
          handleRemove (file) {
            console.log(file);
        },
        handlePictureCardPreview(file){
            console.log(file);
        },
          
      }
  }
  </script>
  
  <style scoped>
      .el-radio__label{
          padding-left: 6px !important;
      }
      .el-row{
          margin-left: 0 !important;
          margin-right: 0 !important;
      }
      .select{
          width: 100%;
      }
      .avatar-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
          border-color: #409EFF;
      }
      .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
      }
      .avatar {
          width: 178px;
          height: 178px;
          display: block;
      }
      .el-dialog__close, .el-message-box__close{
          color: #606266 !important;
      }
  </style>
  
  